<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>01_防抖(debounce)-认识防抖操作</title>
  <!-- 
  防抖（Debounce）是一种常用的编程技巧，主要用于控制频繁触发的事件，减少性能损耗，提升用户体验。
  一、防抖的定义
  防抖是指在事件被触发后，延迟一段时间再执行相应的操作。如果在这段时间内事件再次被触发，则重新计时。只有在事件停止触发后，才能执行最后一次操作。

  二、防抖的原理
  防抖的核心思想是使用定时器（ `setTimeout` ）来控制函数的执行。每次事件触发时，都会清除之前的定时器，重新设置一个新的定时器。只有在事件停止触发后，定时器才会到期并执行相应的操作。

  三、防抖的实现
  以下是一个简单的防抖函数实现：
  function debounce(func, delay) {
      let timer;

      return function(...args) {
          const context = this;

          // 清除之前的定时器
          clearTimeout(timer);

          // 设置新的定时器
          timer = setTimeout(() => {
              func.apply(context, args);
          }, delay);
      };
  }
   使用示例
  // 示例：防抖处理输入框的输入事件
  const input = document.getElementById('myInput');

  const handleInput = debounce(function(event) {
      console.log('输入内容:', event.target.value);
  }, 300); // 300ms 防抖延迟

  input.addEventListener('input', handleInput);
  在这个示例中，当用户在输入框中输入内容时， `handleInput`  函数会被防抖处理。只有当用户停止输入超过 300 毫秒后，才会执行  `console.log`  操作。

  四、防抖的应用场景
  1. 搜索框输入：在用户输入搜索关键词时，减少请求次数，避免频繁发送网络请求。
  2. 窗口调整大小：在用户调整浏览器窗口大小时，减少重绘和重排的次数。
  3. 滚动事件：在页面滚动时，限制执行某些操作（如加载更多内容、动画效果等）的频率。

  五、总结
  - 防抖的目的：减少高频事件的触发频率，优化性能。
  - 实现原理：使用定时器控制函数的执行，只有事件停止触发后才执行最后一次操作。
  - 应用场景：适用于输入框、窗口调整、滚动等需要控制频率的场景。
  -->
</head>
<body>

  <button>按钮</button>

  <input type="text">

  <script src="./js/underscore.js"></script>

  <script>
    const inputEl = document.querySelector('input')
    // let counter = 1
    // inputEl.oninput = function() {
    //   console.log(`发送网络请求${counter++}:`, this.value)
    // }

    let counter = 1
    inputEl.oninput = _.debounce(function() {
      console.log(`发送网络请求${counter++}:`, this.value)
    }, 1000)

  </script>
  
</body>
</html>